import React from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router-dom';
import * as AppAction from 'store/app/action';
import Router from 'router/router';

import { Menu } from 'antd';
import * as css from './css/header';

function Header(props) {
  const { app, appAction } = props;

  function onLogout() {
    appAction.logout();

    window.location.replace(`${Router.basename}${Router.Login.path}`);
  }

  const menu = (
    <Menu>
      <Menu.Item onClick={onLogout}>注销</Menu.Item>
      {/* <Menu.Item onClick={toModifyPassword}>修改密码</Menu.Item> */}
    </Menu>
  );
  return (
    <css.Header>
      <css.Avatar icon='user' />
      <css.Username overlay={menu}>
        <css.UsernameText>{app.username}</css.UsernameText>
      </css.Username>
    </css.Header>
  );
}

export default connect(
  state => {
    const { app } = state;

    return { app };
  },
  f => ({
    appAction: {
      logout() {
        f(AppAction.logout(...arguments));
      }
    }
  })
)(Header);
